import type { FormItemDto } from '../types'
import { Component, toNative, Prop, Watch, Emit } from 'vue-facing-decorator'
import Render from '@/render/Render'
import {
    VxeGrid,
    VxePager,
    type VxeColumnSlotTypes,
    type VxeGridDefines,
    type VxeGridMethods,
    type VxeGridPropTypes,
    type VxeGridProps,
    type VxeTableDataRow
} from 'vxe-table'
import type { FormModalDto } from '@/components/modal/Modal'
import { readonly } from 'vue'
import { Checkbox, Input } from 'ant-design-vue'
import { CloseCircleFilled } from '@ant-design/icons-vue'

export interface FormDataDto {
    name: string
    isRequired: boolean
}

export interface TableConfigDto {
    field: string
    title: string
    slotType: string
    value?: string | number
    operates?: string[]
}

@Component
export class FormTable extends Render {
    @Prop() formData!: FormItemDto

    tableColumnConfigOld = () => [] as VxeGridPropTypes.Columns<VxeTableDataRow>

    tableTreeConfig = {}

    tableData = [] as FormDataDto[]

    @Emit('update:modelValue')
    onUpdate(data: FormItemDto[] | (() => FormModalDto)) {
        return data
    }

    @Watch('formData', { deep: true, immediate: true })
    watchFormData(newval: FormItemDto) {
        if (!newval) return
        if (!this.tableColumnConfig.length) {
            this.tableColumnConfig = this.createTableConfig(newval?.params?.tableColumnConfig)
        }
        if (!this.tableData.length) {
            this.addTableData('姓名')
            this.addTableData('手机号')
        }
    }

    onHandleInput() {
        this.createForm()
    }

    onHandleCheckboxChange() {
        this.createForm()
    }

    onRemove(index: number) {
        console.log(index, this.tableData)
        this.tableData.splice(index, 1)
        console.log(this.tableData)
        this.createForm()
    }

    createTableConfig(configList: TableConfigDto[]) {
        const data = [] as VxeGridPropTypes.Columns<VxeTableDataRow>
        configList.forEach((i, index) => {
            data.push({
                field: i.field,
                title: i.title,
                slots: {
                    default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                        {
                            return i.slotType === 'input' ? (
                                <Input v-model={row.name} readonly onInput={this.onHandleInput}></Input>
                            ) : i.slotType === 'checkbox' ? (
                                <Checkbox
                                    v-model={row.isRequired}
                                    onChange={this.onHandleCheckboxChange}
                                ></Checkbox>
                            ) : i.slotType === 'operate' ? (
                                i?.operates?.map((o) => {
                                    return o === 'remove' ? (
                                        <div class="flex gap-10">
                                            <div class="cursor-pointer" onClick={() => this.onRemove(index)}>
                                                <CloseCircleFilled />
                                            </div>
                                        </div>
                                    ) : (
                                        <></>
                                    )
                                })
                            ) : (
                                <span>row[i.field]</span>
                            )
                        }
                    }
                }
            })
        })
        return data
    }

    addTableData(name: string = '表单名称') {
        this.tableData.push({
            name: name,
            isRequired: false
        })
        this.createForm()
    }

    createForm() {
        const responseFormData = {} as any
        this.tableData.forEach((i, index) => {
            responseFormData['name' + index] = {
                name: i.name,
                element: 'input',
                placeholder: `请输入您的${i.name}`,
                readonly: true,
                required: i.isRequired
            }
        })

        const newForm = () => {
            return {
                title: '',
                theme: 'light',
                show: true,
                items: responseFormData,
                complete: () => {},
                cancel: () => {}
            } as FormModalDto
        }

        this.onUpdate(newForm)
    }

    tableConfig = {
        align: 'left',
        border: 'inner'
        // height: 'auto',
    } as VxeGridProps

    render() {
        return (
            <div>
                {/* <ElButton
                    onClick={() => this.addTableData()}
                    type="primary"
                    icon={Plus}
                    class="mb-20"
                >
                    添加
                </ElButton> */}
                <VxeGrid
                    ref="ref"
                    {...this.tableConfig}
                    columns={this.tableColumnConfig}
                    data={this.tableData}
                />
            </div>
        )
    }
}

export default toNative(FormTable)
